<template>
	<div class="modal-list">
		<section >
			<div class="new-modal-title">
				{{paramsIs[itemIndex].title}}
				<i class="ion-close-round delete" @click="genderDelete()"></i>
			</div>			
			<list>
				<item v-if="!paramsIs[itemIndex].all" :class="{'active-on':paramsIs[itemIndex].index===''}" @click.native="allClick">全部</item>
				<item v-for="(item,index) in paramsIs[itemIndex].list" :class="{'active-on':paramsIs[itemIndex].index===item.id}" @click.native="modalClick(index)"  >
					{{item.name?item.name:item}}
				</item>
			</list>
		</section>
	</div>
</template>

<script>
	import { bus } from 'bus.js'
	export default {
		data() {
			return {
			}
		},
		methods: {
			modalClick(index) {				
				bus.$emit(this.paramsIs[this.itemIndex].emit,index)
			},
			allClick(){
				bus.$emit(this.paramsIs[this.itemIndex].emit,'aall')
			},
			genderDelete(){
				this.paramsIs.pop()	
			},
			//Init
			Init(){				
				
			}
		},
		props: [
			'paramsIs',
			'itemIndex'
		],
		mounted(){
//			console.log(this.paramsIs)
		}

	}
</script>
<style type="text/css">
	.modal-list {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		overflow-y: auto;
	}
	.modal-list section{padding-top: 44px;}
	.modal-list section .new-modal-title{ position: fixed;top: 0; left: 0; width: 100%; }
	.modal-list section div.active-on{ position: relative; }
	.modal-list section div.active-on:after{content: "\f121"; display: block; width: 50px; height:50px; right: 0; top: 0; position: absolute; line-height: 50px;
	color: #FF6816;
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
	.page{}
</style>